<template>
    <div class="kva-container-box">
        <div class="kva-container">
            <home-page-header>
                <div class="kva-from-search">
                    <el-form :inline="true">
                        <el-form-item>
                            <el-button class="kva-button" type="primary" icon="Plus" @click="handleAddSysUser">添加角色</el-button>
                        </el-form-item>
                        <el-form-item label="关键词:" style="margin-left: 15px">
                            <el-input v-model="queryParams.keyword" placeholder="请输入搜索关键词..." maxlength="10"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="kva-button" type="primary" icon="Search" @click="handleSearch">搜索</el-button>
                            <el-button class="kva-button" type="warning" icon="Delete" @click="handleClear">清空</el-button>
                            <el-button class="kva-button" type="success" icon="Refresh" @click="handleLoadData">刷新</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" style="width: 100%"
                          :height="settings.tableHeight()">
                    <el-table-column fixed prop="id" label="ID" width="100" align="center"/>
                    <el-table-column prop="roleName" label="角色名" width="120" align="center"/>
                    <el-table-column prop="roleCode" label="角色代号" width="200" align="center"/>
                    <el-table-column label="删除状态" align="center" width="120">
                        <template #default="scope">
                            <!-- 默认激活状态颜色 active-color="#ff0000"
                                 选中状态颜色   inactive-color="#00ff00" -->
                            <el-switch
                                v-model="scope.row.isDeleted"
                                inline-prompt
                                size="large"
                                :active-value="1"
                                active-color="#ff0000"
                                active-text="已删除"
                                inactive-color="#00ff00"
                                inactive-text="未删除"
                                :inactive-value="0"
                                @change="handleChangeStatus(scope.row,'is_deleted')"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center" width="180">
                        <template #default="scope">
                            {{ formatTimeToStr(scope.row.createTime, "yyyy-MM-dd hh:mm:ss") }}
                        </template>
                    </el-table-column>
                    <el-table-column label="更新时间" align="center" width="180">
                        <template #default="scope">
                            {{ formatTimeToStr(scope.row.updateTime, "yyyy-MM-dd hh:mm:ss") }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="360">
                        <template #default="{row,$index}">
                            <el-button link type="danger" icon="RemoveFilled" @click="handleDelete(row)">删除
                            </el-button>
                            <el-button link type="primary" icon="Edit" @click="handleEdit(row)">编辑</el-button>
                            <el-button link type="success" icon="Switch" @click="handleRoleMenu(row)">授予菜单
                            </el-button>
                            <el-button link type="success" icon="Switch" @click="handleRoleApi(row)">授予API
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </home-page-header>
        </div>
        <!-- 添加和编辑弹窗 -->
        <add-sys-role ref="addSysUserRef" @load="handleLoadData"></add-sys-role>
        <!-- 角色菜单授权 -->
        <add-role-menu-api ref="addRoleMenuRef"></add-role-menu-api>
        <!-- 角色权限授权 -->
        <add-role-api ref="addRoleApiRef"></add-role-api>
    </div>
</template>

<script setup>
import settings from '@/settings';
import {kvaMessage} from "@/utils/kvaMessage.js";
import {FindData, UpdateStatus, DeleteById} from "@/api/sysRole.js"
import {formatTimeToStr} from '@/utils/date.js'
import AddSysRole from "@/views/sys/components/AddSysRole.vue";
import AddRoleMenuApi from "@/views/sys/components/AddRoleMenu.vue";
import AddRoleApi from "@/views/sys/components/AddRoleApi.vue";

// 定义搜索关键词
// 定义参数
const queryParams = reactive({
    keyword: ""
})
// 定义用户数据容器
const tableData = ref([])

// 查询角色列表信息
const handleLoadData = async () => {
    // 调用系统角色接口的方法
    const resp = await FindData(queryParams)
    tableData.value = resp.data
}

// 修改状态
const handleChangeStatus = async (row, field) => {
    let params = {id: row.id, field}
    if (field == 'is_deleted') {
        params.value = row.isDeleted
    }
    // 调用修改状态的接口方法
    await UpdateStatus(params)
    kvaMessage.notifySuccess("状态修改成功！")
}

// 删除单个
const handleDelete = async (row) => {
    try {
        const result = await kvaMessage.confirm("删除用户", "您确定要删除吗？")
        if (result === 'confirm') {
            // 调用删除接口
            await DeleteById(row.id)
            kvaMessage.success("删除成功！")
            // 重新渲染数据
            handleLoadData()
        }
    } catch (e) {
        kvaMessage.notifyError("删除失败!")
    }
}


// 定义添加和编辑父组件的属性
const addSysUserRef = ref({})
// 添加
const handleAddSysUser = () => {
    addSysUserRef.value.handleOpen()
}
// 编辑
const handleEdit = (row) => {
    addSysUserRef.value.handleOpen(row.id)
}

// 定义角色菜单权限的组件属性
const addRoleMenuRef = ref({})

// 授予权限
const handleRoleMenu = (row) => {
    addRoleMenuRef.value.handleOpen(row)
}

// 定义API菜单权限的组件属性
const addRoleApiRef = ref({})
// 授予权限
const handleRoleApi = (row) => {
    addRoleApiRef.value.handleOpen(row)
}


// 搜索按钮
const handleSearch = () => {
    // 重新渲染页面
    handleLoadData()
}

// 清空按钮
const handleClear = () => {
    // 清空搜索的条件
    queryParams.keyword = ''
    // 重新渲染页面
    handleLoadData()
}

// 生命周期加载
onMounted(() => {
    handleLoadData()
})

</script>


<style scoped lang="scss">

</style>
